<template>
  <div class="container">
    <!-- 用户信息 -->
    <header class="header">
      <h2>笔记</h2>
      <div class="userinfo">
        <img class="logo" :src="userInfo.avatarUrl">
        <h3 class="username">{{userInfo.nickName}}</h3>
      </div>
    </header>
    <ul class="list">
      <li v-for="(item, index) in lists" :key="index" @click="bindViewTap">
        <panel :title="item.title" :brief="item.brief" :digest="item.digest" />
      </li>
    </ul>
  </div>
</template>

<script>
import panel from '@/components/panel'
import { getArticles } from '@/utils/index'

export default {
  data () {
    return {
      lists: [],
      userInfo: {}
    }
  },

  components: {
    panel
  },

  methods: {
    bindViewTap () {
      const url = '../detail/main'
      wx.navigateTo({ url })
    },

    getUserInfo () {
      // 调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: (res) => {
              this.userInfo = res.userInfo
            }
          })
        }
      })
    },

    getList () {
      this.lists = getArticles()
    }
  },

  created () {
    // 调用应用实例的方法获取全局数据
    this.getUserInfo()

    // 获取文章列表
    this.getList()
  }
}
</script>

<style scoped lang="stylus">
  .container {
    padding: 0 20px;
  }

  .header {
    position fixed
    top 0
    left 0
    right 0
    // width 100%
    display flex
    align-items center
    justify-content space-between
    height 50px
    padding: 5px 20px
    background #fff
    box-shadow 0 3px 3px #ddd

    h2 {
      font-size 35px
      color #007fff
    }

    .userinfo {
      display flex
      align-items center

      .logo {
        width 35px
        height 35px
        padding-right 15px

        img {
          width 100%
          height 100%
        }
      }

      .username {
        width 70px
        font-size 12px
        color green
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
      }
    }
  }

  .list {
    margin-top 80px
  }

</style>
